<template>
  <div class="login-page">
    <div class="content">
      <div class="login-box">
        <div class="logo" :class="{ 'login-logo': formType === 'login' }">
          <img src="@images/login/LOGO.png" alt="" />
        </div>
        <ul v-if="formType === 'login'" :class="['login-type', loginType]">
          <li
            :class="['login-item', 'login-type-1', loginType === 'account' ? 'active' : '']"
            @click.stop="onLoginTypeChange('account')">
            账号登录
          </li>
          <li
            :class="['login-item', 'login-type-2', loginType === 'quick' ? 'active' : '']"
            @click.stop="onLoginTypeChange('quick')">
            验证码登录
          </li>
        </ul>
        <template v-if="formType === 'login'">
          <QuickForm v-if="loginType === 'quick'" @login="onLogin"></QuickForm>
          <AccountForm v-else @login="onLogin" @show-forget="showForgetDialog"></AccountForm>
        </template>
        <RegisterForm v-else @register="onRegister"></RegisterForm>
        <div class="login-bottom-btn">
          <span v-if="formType !== 'login'">已有账号？</span>
          <el-button type="text" @click.stop="toggleForm">
            {{ formType === 'login' ? '立即注册' : '立即登录' }}
          </el-button>
          <!-- <el-button v-if="loginType === 'account' && formType === 'login'" type="text" @click.stop="showForgetDialog">
            忘记密码？
          </el-button> -->
        </div>
      </div>
    </div>
    <div class="version-info">
      <version-label></version-label>
    </div>
    <forget-pwd-dialog :visible.sync="forgetDialogVisible"></forget-pwd-dialog>
  </div>
</template>

<script>
import ForgetPwdDialog from './components/ForgetPwdDialog'
import QuickForm from './components/QuickForm.vue'
import AccountForm from './components/AccountForm.vue'
import RegisterForm from './components/RegisterForm'
import VersionLabel from '../../version/VersionLabel.vue'
import { addNewTenant, internalLogin } from '@api/modules/user'
import { getIsShowGuide } from '@apis/assessManage'

export default {
  name: 'LoginPage',
  components: {
    ForgetPwdDialog,
    QuickForm,
    AccountForm,
    RegisterForm,
    VersionLabel,
  },
  data() {
    return {
      // 登录角色：管理员-admin，普通用户-common
      loginRole: 'admin',
      forgetDialogVisible: false,
      formType: 'login', // 表单类型，login-登录表单，register-注册表单
      loginType: 'account',
    }
  },
  computed: {},
  methods: {
    onLoginTypeChange(type) {
      this.loginType = type
    },
    async onLogin(obj) {
      this.interLogin(obj)
    },
    // 打开弹窗
    showForgetDialog() {
      this.forgetDialogVisible = true
    },
    // 切换表单
    toggleForm() {
      this.formType = this.formType === 'login' ? 'register' : 'login'
      if (this.formType === 'login') {
        this.loginType = 'account'
      }
    },
    // 监听注册
    async onRegister(obj) {
      const { status = 0, data } = await addNewTenant({
        orgName: obj.org,
        telephone: obj.phone,
        code: obj.code,
        password: obj.password,
      })
      if (status === 200) {
        if (data.status === 0) {
          this.$message.success('注册成功')
          this.loginType = 'account'
          setTimeout(() => {
            this.onLogin({ loginName: data.tips, loginPassword: obj.password })
          }, 500)
        } else {
          this.$message.warning(data.tips)
        }
      }
    },
    interLogin(obj) {
      let params = {}
      if (this.loginType === 'account') {
        params = {
          loginName: obj.loginName || '',
          loginPassword: obj.loginPassword || '',
          smCode: '',
          loginType: '1',
        }
      } else {
        params = {
          loginName: obj.phone || '',
          loginPassword: '',
          smCode: obj.smCode || '',
          loginType: '2',
        }
      }
      internalLogin(params).then(res => {
        if (res.status === 200) {
          localStorage.setItem('pskh_loginName', obj.loginName || obj.phone || '')
          localStorage.setItem('pskh_loginPassword', window.btoa(obj.loginPassword || ''))
          setTimeout(() => {
            this.loginSuccess1(res.data || {})
          }, 500)
        }
      })
    },
    // 登录成功回调
    async loginSuccess1(info) {
      sessionStorage.setItem('pskh_userId', info.userId)
      sessionStorage.setItem('userName', info.userName)
      sessionStorage.setItem('token', info.token)
      // sessionStorage.setItem('userInfo', JSON.stringify(info))
      if (info.isPwdSimple === 1) {
        sessionStorage.setItem('isPwdSimple', '1')
      } else {
        sessionStorage.removeItem('isPwdSimple')
      }

      // 本地免登陆验证
      localStorage.setItem('pskh_userId', info.userId)
      localStorage.setItem('token', info.token)
      // localStorage.setItem('userInfo', JSON.stringify(info))
      localStorage.setItem('pskh_tenantId', info.tenantId)

      const tenantCode = this.tenantCode || info.tenantId
      localStorage.setItem('tenantCode', tenantCode)

      const expireTime = info.endTime || ''
      if (expireTime) {
        const expireDate = new Date(expireTime)
        let vipTimes = 0
        vipTimes = expireDate.getTime() - new Date(info.loginTime || new Date()).getTime()
        if (vipTimes < 0) {
          info.vipDays = 0
        } else {
          vipTimes = vipTimes / 1000
          info.vipDays = Math.ceil(vipTimes / 3600 / 24)
        }
      } else {
        info.vipDays = 0
      }

      this.$store.state.boardTabs = 'week'
      this.$store.commit('role/setUserInfo', info)

      try {
        // await this.$store.dispatch('getLoginCount')

        await this.$store.dispatch('getUserPermissions')
      } catch (err) {
      } finally {
        if (this.$store.getters['role/isOperateRole']) {
          this.$router.push({
            name: 'JXKH_DELAY_MANAGE',
          })
        } else if (this.$store.getters['role/isAdminRole']) {
          const { status, data } = await getIsShowGuide()
          if (status === 200 && data) {
            localStorage.setItem('isShowGuide', true)
            this.$router.push({
              name: 'JXGL_ASSESS_MANAGE',
            })
          } else {
            localStorage.removeItem('isShowGuide')
            this.$router.push({
              name: 'homePage',
            })
          }
        } else {
          localStorage.removeItem('isShowGuide')
          this.$router.push({
            name: 'homePage',
          })
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.login-page {
  position: relative;
  width: 100%;
  height: 100%;
  color: #333;
  .content {
    width: 100%;
    height: 100%;
    background: url('../../assets/images/login/bg.jpg') no-repeat;
    background-size: 100%;
    position: relative;
  }

  .login-box {
    position: absolute;
    z-index: 1;
    left: 100px;
    top: 50%;
    transform: translateY(-50%);
    width: 460px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .register-tips-txt {
      margin-bottom: 10px;
      font-size: 15px;
      font-weight: 600;
      color: #666;
      text-align: center;
      strong {
        font-size: 24px;
        padding: 0 4px;
        color: #f56c6c;
      }
    }
    .login-type {
      width: 100%;
      max-width: 360px;
      margin: 0 auto;
      margin-bottom: 20px;
      font-size: 0;
      position: relative;
      text-align: center;
      .login-item {
        display: inline-block;
        cursor: pointer;
        color: #707070;
        font-weight: 400;
        vertical-align: top;
        font-size: 20px;
        height: 26px;
        line-height: 26px;
        &.login-type-1 {
          text-align: right;
          padding-right: 20px;
        }
        &.login-type-2 {
          text-align: left;
          padding-left: 20px;
        }
      }
      .login-item.active {
        color: #000;
      }
      &::after {
        display: block;
        content: '';
        height: 2px;
        bottom: -5px;
        position: absolute;
        background-color: #006ff2;
      }
      &.account::after {
        width: 80px;
        left: calc(50% - 110px);
        transition: left 0.3s;
      }
      &.quick::after {
        width: 100px;
        left: calc(50% + 10px);
        transition: left 0.3s;
      }
    }
    .logo {
      position: relative;
      width: 100%;
      height: 65px;
      img {
        width: 350px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: -50px;
      }
      &.login-logo img {
        top: -60px;
      }
    }
    .login-bottom-btn {
      margin-top: 10px;
      font-size: 13px;
      text-align: center;
      .el-button {
        font-size: 13px;
      }
    }

    .service-hotline-box {
      margin-top: 20px;
      &.register-hotline-box {
        margin-top: 0;
      }
      .tips {
        font-size: 13px;
        color: #999;
        text-align: center;
        line-height: 1.5;
        a {
          color: #999;
        }
      }
    }
  }

  .version-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 10px;
  }

  @media screen and (min-width: 1200px) {
    .content {
      background-position: right 0 bottom 0;
      .login-box {
        .login-quick-form,
        .login-account-form {
          ::v-deep .el-input {
            height: 60px;
            .el-input__inner {
              height: 60px;
            }
            .pwd-eye-view {
              line-height: 60px;
            }
            i.perfix-icon {
              font-size: 24px;
              line-height: 60px;
            }
          }
          ::v-deep .el-form .login-btn {
            height: 60px;
            line-height: 60px;
            font-size: 24px;
          }
        }
        .register-form {
          ::v-deep .el-input {
            height: 60px;
            .el-input__inner {
              height: 60px;
            }
            .pwd-eye-view {
              line-height: 60px;
            }
            i.perfix-icon {
              font-size: 24px;
              line-height: 60px;
            }
          }
          ::v-deep .el-form .register-btn {
            height: 60px;
            line-height: 60px;
            font-size: 24px;
          }
        }
      }
    }
  }

  @media screen and (min-width: 750px) and (max-width: 1200px) {
    .content {
      background-position: right top;
      .login-box {
        left: 50px;
        transform: translateY(-50%);
        // background: rgba($color: #fff, $alpha: 0.9);
        // box-shadow: 0px 0px 10px 0px rgba($color: #000000, $alpha: 0.2);
        .logo {
          height: 180px;
          top: 20px;
          img {
            width: 300px;
          }
        }
      }
    }
  }

  @media screen and (max-width: 750px) {
    .content {
      background-position: center center;
      .login-box {
        position: relative;
        left: 50%;
        transform: translate(-50%, -50%);
        background: rgba($color: #fff, $alpha: 0.9);
        box-shadow: 0px 0px 10px 0px rgba($color: #000000, $alpha: 0.2);
        width: 80%;
        min-width: 350px;
        max-width: 400px;
        .login-type {
          .login-item {
            font-size: 16px;
          }
          &.account::after {
            width: 64px;
            left: calc(50% - 92px);
            transition: left 0.3s;
          }
          &.quick::after {
            width: 80px;
            left: calc(50% + 12px);
            transition: left 0.3s;
          }
        }
        .logo {
          height: 160px;
          top: 60px;
          img {
            width: 240px;
          }
        }
      }
    }
  }
}
</style>
